<template>
	<view class="all_layout">
		<view class="title"> 欢迎注册 </view>
		<view class="shuru">
			<view class="zhanghaomima">
				<uni-easyinput prefixIcon="person" v-model="user_info.mobile" placeholder="请输入手机号">
				</uni-easyinput>
				<uni-easyinput type="password" v-model="user_info.password" placeholder="请输入密码">
				</uni-easyinput>
				<view class="yanzheng">
					<view class="in_yanzheng">
						<uni-easyinput  prefixIcon="chat" v-model="user_info.sms_code" placeholder="请输入验证码">
						</uni-easyinput>
					</view>
					<view class="yz_anniu" @click="sendSMS">
						<button class="yanzheng_in" type="primary">验证码</button>
					</view>
				</view>
			</view>
		</view>
		<view class="anniu">
			<button type="primary" open-type="getUserInfo" @getuserinfo="userRegister">注册</button>
		</view>
		<view class="zhuce">
			<text>已有账号？点击登录</text>
		</view>
	</view>
</template>

<script setup>
import {ref} from 'vue'
import { useStore } from '@/stores/index.js'
import { settings } from '@/settings/index.js'

const store = useStore()

const user_info = ref({
	mobile: "",
	password: "",
	sms_code: ""
})

const sendSMS = () => {
	uni.request({
		method:"GET",
		url:`${settings.host}/sms/` + user_info.value.mobile,
	}).then((response)=>{
		console.log(response);
		if(response.data.code == 200){
			uni.showToast({
				title:response.data.err_msg,
				icon: "none",
				duration: 3000
			})
		}
	}).catch((err)=> {
		console.log(err);
		uni.showToast({
			title:"验证码发送失败",
			icon:"faild",
			duration: 3000
		})
	})
}

const userRegister = (e) => {
	uni.login({
	  provider: 'weixin', 
	  success: function (response) {
		  console.log(response.code);
		uni.request({
			method:"POST",
			url:`${settings.host}/user/register`,

			data:{
				code: response.code,
				...user_info.value,
				...e.detail.userInfo
			},
		}).then((response)=>{
			console.log(response.data);
			if(response.data.code == 200){
				store.set_token(response.data.token)
				uni.showToast({
					icon:'success',
					title:"注册成功"
				})
			}
			uni.navigateTo({
				url:"/pages/index/index"
			})
		}).catch((err) => {
			console.log(err);
		})
	  }
	});
}
</script>

<style lang="scss" scoped>
	.all_layout {
		height: 100vh;
		width: 100%;
		box-sizing: border-box;
		.title {
			height: 10vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 25px;
		}

		.shuru {
			margin-top: 20rpx;
			.zhanghaomima {
				margin-right: 20rpx;
				padding: 0 30rpx;
				.uni-easyinput{
					padding: 10rpx;
					width: 100%;
				}
				.yanzheng{
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 30rpx;
					.in_yanzheng{
						flex: 1;
					}
					.yz_anniu{
						height: 70rpx;
						.yanzheng_in{
							height: 100%;
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}
		.anniu{
			margin-top: 30rpx;
			padding: 0 20rpx;
			button{
				width: 100%;
			}
		}
		.zhuce{
			margin: 20rpx;
			color: #999;
			text-align: right;
		}
	}
</style>
